<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>money 值：{{ money }}</p>
    <p>购物车： {{ $store.state.cartList }}</p>
    <p>总价： {{ totalPrice }}</p>
    <!-- 不建议直接修改：1. 改了后，调试工具无法追踪改变，不利于调试  2. 严格模式下报错 -->
    <!-- <button @click="$store.state.count++" class="btn btn-primary">+1</button> -->
    <!-- <button @click="$store.commit('addOne')" class="btn btn-primary">+1</button> -->
    <button @click="addOne" class="btn btn-primary">+1</button>

    <!-- <button @click="$store.commit('addCount', 5)" class="btn btn-primary">+5</button> -->
    <button @click="addCount(5)" class="btn btn-primary">+5</button>

    <!-- <button @click="$store.dispatch('reqCartList')" class="btn btn-primary">发请求</button> -->
    <button @click="reqCartList" class="btn btn-primary">发请求</button>

  </div>
</template>

<script>
export default {
  name: 'Left',
  // 用计算属性可以简化对vuex里state的访问
  computed: {
    count () {
      return this.$store.state.count
    },
    money () {
      return this.$store.state.money
    },
    totalPrice () {
      return this.$store.getters.totalPrice
    }
  },
  methods: {
    addOne () {
      this.$store.commit('addOne')
    },
    addCount (num) {
      this.$store.commit('addCount', num)
    },
    reqCartList () {
      this.$store.dispatch('reqCartList')
    }
  }
}
</script>

<style>
</style>
